import React, { Component, createRef, forwardRef, useImperativeHandle, useRef } from 'react'
// class组件 直接定义函数 模板里面是this 函数组件要const 但是用的时候不要this
// 绑定函数的时候 其中一个要是箭头函数
// 为什么传入ref还要定义一下 因为不能对同一个ref进行定义 需要区分一下
export default function Page8() {
  return (
    <div>
        <h2>useImperativeHandle</h2>
        <PPage8></PPage8>
    </div>
  )
}
// 传入一个函数 return一个jsx
const PPJage8=forwardRef((props,ref)=>{
    const aa=useRef()
    // 第一个参数 ref 第二个参数是函数 并且返回一个对象 focus是对应一个函数 第三个参数依赖
    useImperativeHandle(ref,()=>({focus:()=>{aa.current.focus()}}),[aa])
  return (
    <input  ref={aa}/>
  )
})
 class PPage8 extends Component {
    constructor(props){
   super(props)
   this.aa=createRef()
    }
    ui(){
        this.aa.current.focus()
    }
  render() {
    return (
      <div>
        <PPJage8 ref={this.aa}></PPJage8>
        <button onClick={()=>this.ui()}>获取内容</button>
      </div>
    )
  }
}
